el-upload 拖拽上传样式定制
概述
在内容管理的课程封面部分，需要对 el-upload 组件进行拖拽上传样式定制。本节基于 Element Plus 官方的拖拽上传示例，封装自定义的上传区域样式，替换默认的触发器（trigger）插槽。
官方拖拽上传示例
Element Plus 提供了开箱即用的拖拽上传模式：
<template>
<el-upload
drag
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽文件到此处或 <em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
jpg/png 文件大小不超过 500kb
</div>
</template>
</el-upload>
</template>
<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
</script>
vue
自定义拖拽上传样式
属性配置
在封装的 VpUploader 组件中，通过 attrs 传递配置：
// attrs 配置
const uploadAttrs = {
drag: true, // 启用拖拽
multiple: false, // 禁用多选（仅上传一张封面）
accept: 'image/*', // 限制文件类型为图片
action: '/api/upload',
}
typescript
自定义触发器插槽
替换默认的拖拽区域内容：
<template>
<el-upload v-bind="uploadAttrs">
<!-- 自定义拖拽区域 -->
<template #default>
<div class="upload-trigger">
<div class="upload-trigger__content">
<el-icon class="upload-trigger__icon"><upload-filled /></el-icon>
<div class="upload-trigger__text">
<span>拖拽上传</span>
<em>或点击上传</em>
</div>
</div>
</div>
</template>
<!-- 提示信息 -->
<template #tip>
<div class="upload-tip">
仅支持 jpg/png 格式，文件大小不超过 2MB
</div>
</template>
</el-upload>
</template>
<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
</script>
<style scoped lang="scss">
.upload-trigger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px;
&__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
&__icon {
font-size: 48px;
color: var(--el-text-color-placeholder);
}
&__text {
color: var(--el-text-color-regular);
font-size: 14px;
em {
color: var(--el-color-primary);
font-style: normal;
}
}
}
.upload-tip {
font-size: 12px;
color: var(--el-text-color-secondary);
margin-top: 8px;
}
</style>
vue
配置项说明
| 属性 | 值 | 说明 |
|---|---|---|
drag | true | 启用拖拽上传区域 |
multiple | false | 课程封面仅需一张图片，禁用多选 |
accept | image/* | 限制文件类型为图片 |
limit | 1 | 最多上传 1 个文件 |
drag 与 multiple 的关系
// 单图场景（课程封面）
{ drag: true, multiple: false, limit: 1, accept: 'image/*' }
// 多图场景（轮播图）
{ drag: true, multiple: true, limit: 5, accept: 'image/*' }
// 文件场景（附件上传）
{ drag: true, multiple: true, accept: '.pdf,.doc,.docx' }
typescript
样式定制要点
- 删除默认的
#trigger插槽，使用#default插槽自定义拖拽区域内容 - 使用 Flex 布局垂直居中图标和文字
- 图标使用 Element Plus 的
el-icon组件 +upload-filled图标 - 文字部分分为普通文本（"拖拽上传"）和强调文本（"或点击上传"）
- 提示信息通过
#tip插槽单独渲染
实践要点
accept属性限制文件选择对话框中显示的文件类型，但不会阻止拖拽上传非目标类型文件（需before-upload二次校验）- 自定义样式后需确保拖拽区域的点击事件能正常触发文件选择
- 课程封面上传仅允许单张图片，
multiple设为false且limit设为1
↑